এইচটিএমএল ডোম ব্যবহার করে জাভাস্ক্রিপ্ট এইচটিএমএল ডকুমেন্টের সকল এলিমেন্টকে এক্সেস এবং পরিবর্তন করতে পারে।

এইচটিএমএল ডোম/ডকুমেন্ট অবজেক্ট মডেল

যখন একটি ওয়েব পেজ ব্রাউজারে সম্পূর্ণভাবে লোড হয় ব্রাউজারটি পেজের একটি ডকুমেন্ট অবজেক্ট মডেল তৈরি করে।

সাধারণত অবজেক্টের একটি ট্রি আকারে এইচটিএমএল ডোম মডেলটি তৈরি করা হয়:

                                                                                                        একটি এইচটিএমএল ডোম ট্রি

একটি ডায়নামিক এইচটিএমএল পেজ তৈরি করার জন্য জাভাস্ক্রিপ্ট অবজেক্ট মডেল দ্বারা সব ধরনের ক্ষমতা অর্জন করে :

• জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল এলিমেন্টকে পরিবর্তন করতে পারে।
• জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল এট্রিবিউটকে পরিবর্তন করতে পারে।
• জাভাস্ক্রিপ্ট একটি পেজের সকল সিএসএস স্টাইলকে পরিবর্তন করতে পারে।
• জাভাস্ক্রিপ্ট একটি পেজের বিদ্যমান এইচটিএমএল এলিমেন্ট এবং এট্রিবিউটকে বাদ দিতে পারে।
• জাভাস্ক্রিপ্ট নতুন এইচটিএমএল এলিমেন্ট এবং এট্রিবিউট যোগ করতে পারে।
• জাভাস্ক্রিপ্ট একটি পেজের সকল এইচটিএমএল ইভেন্টের প্রতিক্রিয়া ঘটাতে পারে।
• জাভাস্ক্রিপ্ট একটি পেজে নতুন এইচটিএমএল ইভেন্ট তৈরি করতে পারে।

যেসকল বিষয় সম্পর্কে জানতে পারবেন:

• এইচটিএমএল এলিমেন্টের কন্টেন্ট কিভাবে পরিবর্তন করা যায়
• এইচটিএমএল এলিমেন্টের স্টাইল(সিএসএস) কিভাবে পরিবর্তন করা যায়
• এইচটিএমএল ডোম ইভেন্ট কিভাবে ঘটানো যায়
• এইচটিএমএল এলিমেন্ট কিভাবে তৈরি এবং বাদ দেয়া যায়

ডোম কি?

ডোম W3C (World Wide Web Consortium) এর স্ট্যান্ডার্ড।

ডোম ডকুমেন্টকে এক্সেস করার একটি স্ট্যান্ডার্ড নির্দেশ করে:

W3C ডোম স্ট্যান্ডার্ড ৩টি ভিন্ন ভিন্ন অংশে বিভক্ত:

• Core DOM - সব ধরনের ডকুমেন্টের জন্য আদর্শ মডেল
• XML DOM - এক্সএমএল ডকুমেন্টের জন্যে একটি আদর্শ মডেল
• HTML DOM - এইচটিএমএল ডকুমেন্টের জন্য একটি স্ট্যান্ডার্ড মডেল

এইচটিএমএল ডোম কি?

এইচটিএমএল ডোম এইচটিএমএলের জন্য একটি স্ট্যান্ডার্ড অবজেক্ট মডেল এবং প্রোগ্রামিং ইন্টারফেস।এটা যা নির্দেশ করেঃ

• এইচটিএমএল এলিমেন্টকে অবজেক্ট হিসেবে।
• সকল এইচটিএমএল এলিমেন্টের প্রোপার্টি
• সকল এইচটিএমএল এলিমেন্টকে এক্সেস করার জন্য মেথড
• সকল এইচটিএমএল এলিমেন্টের জন্য ইভেন্ট

অন্যকথায়: এইচটিএমএল এলিমেন্টকে পেতে, পরিবর্তন করতে, যোগ করতে, ডিলিট করার জন্য এইচটিএমএল ডোম হলো স্ট্যান্ডার্ড।

এইচটিএমএল ডোম মেথডগুলো হলো প্রক্রিয়া বা কাজ যা আপনি এইচটিএমএল এলিমেন্টে ঘটাতে পারবেন।

এইচটিএমএল ডোম এলিমেন্টের প্রোপার্টিগুলো হলো ভ্যালু যা আপনি যেকোন সময় সেট অথবা পরিবর্তন করতে পারেন।

ডোম প্রোগ্রামিং ইন্টারফেস

জাভাস্ক্রিপ্ট দ্বারা এইচটিএমএল ডোমকে এক্সেস করা যায়(অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজ দিয়েও করা যায়)।

ডোম-এ সকল এইচটিএমএল এলিমেন্টকে অবজেক্ট হিসেবে বিবেচনা করা হয়।

প্রতিটি অবজেক্টের প্রোপার্টি এবং মেথড হলো প্রোগ্রামিং ইন্টারফেস।

প্রোপার্টি হলো একটি ভ্যালু যা আপনি এক্সেস করতে পারেন বা সেট করতে পারেন(যেমনঃ একটি এইচটিএমএল এলিমেন্টের কন্টেন্টকে পরিবর্তন করা)।

মেথডহলো আপনি যা ঘটাবেন(যেমনঃ এইচটিএমএল এলিমেন্ট বাদ দেয়া বা যোগ করা)।

উদাহরণ

নিম্নলিখিত উদাহরণে id="test" যুক্ত <div> এলিমেন্টের কন্টেন্ট(innerHTML) পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1323

উপরোক্ত উদাহরণে, getElementById হলো একটি মেথড যেখানে innerHTML হলো একটি প্রোপার্টি।

getElementById মেথড

একটি এইচটিএমএল এলিমেন্টকে এক্সেস করার সবচেয়ে সহজ পদ্ধতি হলো এলিমেন্টের id ব্যবহার করা।

উপরোক্ত উদাহরণে, এলিমেন্টকে খুজে পেতে getElementById মেথড id="test" ব্যবহার করেছে।

innerHTML প্রোপার্টি

একটি এলিমেন্টের কন্টেন্টকে এক্সেস অথবা পরিবর্তন করার সবচেয়ে সহজ পদ্ধতি হলো innerHTML প্রোপার্টি ব্যবহার করা।

একটি ওয়েব পেজের সকল অবজেক্টের মালিক হলো এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট।

এইচটিএমএল ডোম ডকুমেন্ট অবজেক্ট

ডকুমেন্ট অবজেক্ট একটি পেজকে প্রদর্শন করে।

একটি এইচটিএমএল পেজের যেকোন এলিমেন্টকে এক্সেস করতে অবশ্যই ডকুমেন্ট অবজেক্ট দিয়ে শুরু করতে হবে।

নিম্নলিখিত উদাহরণে এইচটিএমএল এলিমেন্টকে কিভাবে এক্সেস এবং পরিচালনা করা যায় তা দেখানো হলো:

এইচটিএমএল এলিমেন্ট খুজে বের করা

এইচটিএমএল এলিমেন্ট পরিবর্তন

এলিমেন্ট যোগ এবং বাদ দেওয়া

ইভেন্ট হ্যান্ডলার সংযুক্ত করার পদ্ধতি

এইচটিএমএল অবজেক্টকে এক্সেস

প্রথম এইচটিএমএল ডোম আবিষ্কৃত হয় ১৯৯৮ সালে, যেখানে ১১টি এইচটিএমএল অবজেক্ট, অবজেক্ট কালেকশন এবং প্রোপার্টি ছিল। এগুলো এইচটিএমএল ৫ এ এখনো ভ্যালিড।

পরবর্তীতে এইচটিএমএল ডোম লেভেল ৩ এ আরও অবজেক্ট, অবজেক্ট কালেকশন, এবং প্রোপার্টি সংযুক্ত করা হয়েছে।

এইচটিএমএল এলিমেন্টকে কিভাবে খুজে বের করতে হয় এবং এক্সেস করতে হবে তা এই পেজে শিখতে পারবো।

এইচটিএমএল এলিমেন্টকে খোঁজা

প্রায়ই আপনি জাভাস্ক্রিপ্ট দ্বারা একটি পেজের এইচটিএমএল এলিমেন্টকে নিয়ে কাজ করতে চাইবেন।

সেটা করার জন্য আপনাকে প্রথমে এলিমেন্টটিকে খুঁজে বের করতে হবে। একটি এলিমেন্টকে খুঁজে বের করার কয়েকটি উপায় রয়েছেঃ

• id দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
• ট্যাগের নাম দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
• class নাম দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
• সিএসএস সিলেক্টর দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা
• এইচটিএমএল অবজেক্ট কালেকশন দ্বারা এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করা

Id দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

একটি এলিমেন্টকে ডোম এর ভেতর খুঁজে বের করার সবচেয়ে সহজ উপায় হলো এলিমেন্টের Id ব্যবহার করা।

নিচের উদাহরণে id="intro" যুক্ত এলিমেন্টটিকে খুঁজে বের করা হল:

kt_satt_skill_example_id=1342

যদি এলিমেন্টটি খুঁজে পাওয়া যায় তাহলে মেথডটি এলিমেন্টকে অবজেক্ট হিসেবে রিটার্ন করবে।

যদি এলিমেন্টটি খুঁজে পাওয়া না যায় তাহলে el ভ্যারিয়েবলটি খালি থাকবে।

ট্যাগের নাম দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

নিচের উদাহরণে সকল <p> এলিমেন্টকে খুঁজে বের করা হলোঃ

kt_satt_skill_example_id=1344

নিচের এই উদাহরণটি প্রথমে id="main" যুক্ত এলিমেন্টকে খুঁজে বের করবে এবং তারপর "main" এর মাঝের সকল <p> এলিমেন্টকে খুঁজে বের করবেঃ

kt_satt_skill_example_id=1345

Class নামের দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

আপনি যদি একই নামের Class যুক্ত এইচটিএমএল এলিমেন্টটিকে খুঁজে বের করতে চান তাহলে getElementsByClassName() ব্যবহার করুন।
 

নিচের এই উদাহরনটিতে class="para" যুক্ত সকল এলিমেন্টকে রিটার্ন করে।

kt_satt_skill_example_id=1348

Class এর নাম দ্বারা এলিমেন্টকে খুঁজে বের করা, IE8 এবং এর আগের ভার্সনগুলোতে সাপোর্ট করে না।

CSS সিলেক্টর দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

আপনি যদি নির্দিষ্ট সিএসএস সিলেক্টরযুক্ত(যেমনঃ id, class , type, এট্রিবিউট, এট্রিবিউটের ভ্যালু ইত্যাদি) সকল এইচটিএমএল এলিমেন্টকে খুঁজতে চান তবে querySelectorAll() মেথডটি ব্যবহার করুন।
 

নিচের এই উদাহরনটিতে class="para" যুক্ত সকল <p> এলিমেন্টকে রিটার্ন করে।

kt_satt_skill_example_id=1349

querySelectorAll() মেথড দ্বারা এলিমেন্টকে খুঁজে বের করা, IE8 এবং এর আগের ভার্সনগুলোতে সাপোর্ট করে না।

এইচটিএমএল অবজেক্ট কালেকশন দ্বারা এইচটিএমএল এলিমেন্টকে খুঁজে বের করা

নিচের এই উদাহরণটিতে ফর্ম কালেকশনের মধ্য থেকে id="myForm" যুক্ত ফর্ম এলিমেন্টকে খুঁজে বের করে এবং সকল এলিমেন্টের ভ্যালু প্রদর্শন করে:

kt_satt_skill_example_id=1350

নিচের এই এইচটিএমএল অবজেক্টকেও এক্সেস করা যায়ঃ

kt_satt_skill_example_id=1352

• document.body

kt_satt_skill_example_id=1354

• document.documentElement

kt_satt_skill_example_id=1355

• document.embeds

kt_satt_skill_example_id=1356

• document.forms

kt_satt_skill_example_id=1359

• document.head

kt_satt_skill_example_id=1361

• document.images

kt_satt_skill_example_id=1365

• document.links

kt_satt_skill_example_id=1366

• document.scripts

kt_satt_skill_example_id=1367

• document.title

kt_satt_skill_example_id=1368

এইচটিএমএল ডোম জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল এলিমেন্টের কন্টেন্টকে পরিবর্তন করতে সাহায্য করে।

এইচটিএমএল আউটপুট পরিবর্তন

জাভাস্ক্রিপ্ট খুব সহজে একটি ডায়নামিক এইচটিএমএল কন্টেন্ট তৈরি করতে পারেঃ

তারিখঃ Wed Aug 23 2023 03:13:58 GMT+0600 (Bangladesh Standard Time)

জাভাস্ক্রিপ্টে document.write() দ্বারা সরাসরি এইচটিএমএলে আউটপুট নেওয়া যায়ঃ

kt_satt_skill_example_id=1408

তবে ডকুমেন্ট লোড হয়ে যাওয়ার পর document.write() ব্যবহার করা ঠিক নয়। এটি ডকুমেন্টটিকে সম্পূর্ণ পরিবর্তন করে।

এইচটিএমএল কন্টেন্ট পরিবর্তন

একটি এইচটিএমএল এলিমেন্টের কন্টেন্ট পরিবর্তন করার সবচেয়ে সহজ উপায় হলো innerHTML প্রোপার্টি ব্যবহার করা।

এইচটিএমএল এলিমেন্টের কন্টেন্ট পরিবর্তন করার জন্য নিচের এই সিন্টেক্স ব্যবহার করুনঃ

kt_satt_skill_example_id=1409

নিচের উদাহরণে একটি <p> এলিমেন্টের কন্টেন্টকে পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1412

নিচের উদাহরণে একটি <h3> এলিমেন্টের কন্টেন্টকে পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1414

উদাহরণের ব্যাখ্যাঃ

• উপরের এইচটিএমএল ডকুমেন্টটিতে id="heading" যুক্ত একটি <h3> এলিমেন্ট আছে
• এইচটিএমএল ডোম ব্যবহার করে id="heading" যুক্ত এলিমেন্টটিকে খুঁজে বের করা হয়েছে
• জাভাস্ক্রিপ্ট ঐ এলিমেন্টের কন্টেন্ট পরিবর্তন করেছে

এট্রিবিউটের ভ্যালু পরিবর্তন

এইচটিএমএল এট্রিবিউটের ভ্যালু পরিবর্তন করার জন্য নিচের সিন্টেক্স ব্যবহার করুনঃ

kt_satt_skill_example_id=1417

নিচের উদাহরণে <a> এলিমেন্টের href এট্রিবিউটের ভ্যালু পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1418

উদাহরণের ব্যাখ্যাঃ

• উপরের এইচটিএমএল ডকুমেন্টে id="anc1" যুক্ত <a> এলিমেন্ট আছে
• এইচটিএমএল ডোম ব্যবহার করে id="anc1" যুক্ত এলিমেন্টটিকে খুঁজে বের করা হয়েছে
• জাভাস্ক্রিপ্টের মাধ্যমে href এট্রিবিউটের ভ্যালু "../index.php" থেকে "../../index.php" তে পরিবর্তন করা হয়েছে

এইচটিএমএল ডোম জাভাস্ক্রিপ্টকে এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করতে সাহায্য করে।

এইচটিএমএলের স্টাইল পরিবর্তন

এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করতে নিচের সিন্টেক্স ব্যবহার করুনঃ

kt_satt_skill_example_id=1429

নিম্নলিখিত উদাহরণে একটি <div> এলিমেন্টের স্টাইল পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1434

ইভেন্টের ব্যবহার

কোনো ইভেন্ট ঘটলে এইচটিএমএল ডোম একটি কোড সম্পাদনে সম্মতি দেয়।

এইচটিএমএল এলিমেন্টে যখন কোনো "ঘটনা ঘটে" তখন ব্রাউজারের মাধ্যমে ইভেন্ট তৈরি হয়ঃ

• একটি এলিমেন্টের উপর ক্লিক করা হলে
• পেজ লোড হলে
• ইনপুট ফিল্ড পরিবর্তিত হলে

এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে আপনি ইভেন্ট সম্পর্কে আরো জানতে পারবেন।

এই উদাহরণে, একজন ব্যবহারকারী বাটনে ক্লিক করলে id="div1" যুক্ত এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করা হয়েছেঃ

kt_satt_skill_example_id=1435

এইচটিএমএল ডোম স্টাইল অবজেক্ট রেফারেন্স

সকল এইচটিএমএল ডোম স্টাইল প্রোপার্টির জন্য আমাদের এইচটিএমএল ডোম স্টাইল অবজেক্ট রেফারেন্স দেখুন।

জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল অ্যানিমেশন তৈরি করা শিখুন।

একটি বেসিক ওয়েবপেজ

জাভাস্ক্রিপ্টের মাধ্যমে কিভাবে এইচটিএমএল অ্যানিমেশন তৈরি করতে হয় জানতে আমরা একটি সাধারন ওয়েবপেজ ব্যবহার করবো:

kt_satt_skill_example_id=1440

অ্যানিমেশন কন্টেইনার তৈরি ও স্টাইল

সকল অ্যানিমেশনকে একটি কন্টেইনার এলিমেন্টের মাঝে রাখতে হবে।

kt_satt_skill_example_id=1444

অ্যানিমেশন কোড

একটি এলিমেন্টের স্টাইলের ধারাবাহিক পরিবর্তনের মাধ্যমে জাভাস্ক্রিপ্ট অ্যানিমেশন সম্পন্ন হয়।

এই পরিবর্তনটি একটি টাইমার দ্বারা কল করা হয়। যখন সময়ের ব্যবধান কম হয়, তখন অ্যানিমেশনটি চলমান দেখায়।

প্রাথমিক কোডঃ

kt_satt_skill_example_id=1446

জাভাস্ক্রিপ্ট ব্যবহার করে অ্যানিমেশন তৈরি

kt_satt_skill_example_id=1449

এইচটিএমএল ডোম এইচটিএমএল ইভেন্ট ঘটলে জাভস্ক্রিপ্টকে সে অনুযায়ী কাজ করতে সাহায্য করে:

ইভেন্টের প্রতিক্রিয়া

একটি ইভেন্ট ঘটলে জাভাস্ক্রিপ্ট সম্পাদন হতে পারে, যেমন একজন ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টে ক্লিক করলে।

এইচটিএমএল এলিমেন্টে ক্লিক করলে কোড কার্যকর করার জন্য, এইচটিএমএল ইভেন্ট এট্রিবিউটে জাভাস্ক্রিপ্ট কোড যোগ করুনঃ

kt_satt_skill_example_id=1459

এইচটিএমএল ইভেন্টের উদাহরণঃ

• ব্যবহারকারী যখন মাউস ক্লিক করে
• যখন একটি ওয়েব পেজ লোড হয়
• যখন একটি ইমেজ লোড হয়
• যখন মাউস একটি এলিমেন্টের উপর নিয়ে যাওয়া হয়
• যখন একটি ইনপুট ফিল্ড পরিবর্তিত হয়
• যখন একটি এইচটিএমএল ফর্ম সাবমিট করা হয়
• ব্যবহারকারী যখন একটি বাটনে চাপ দেয়।

নিচের উদাহরণে, একজন ব্যবহারকারী <h3>এলিমেন্টে ক্লিক করলে এর কন্টেন্ট পরিবর্তিত হয়ঃ

kt_satt_skill_example_id=1460

নিচের উদাহরণে, ইভেন্ট হ্যান্ডলার থেকে একটি ফাংশন কল করা হয়েছেঃ

kt_satt_skill_example_id=1462

এইচটিএমএল ইভেন্ট এট্রিবিউট

এইচটিএমএল এলিমেন্টের মধ্যে ইভেন্ট যোগ করতে ইভেন্ট এট্রিবিউট ব্যবহার করুন।

kt_satt_skill_example_id=1464

উপরোক্ত উদাহরণে, বাটনে ক্লিক করলে myFunc নামের একটি ফাংশন রান হবে।

এইচটিএমএল ডোম ব্যবহার করে ইভেন্ট যোগ করা

এইচটিএমএল ডোম আপনাকে জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল এলিমেন্টে ইভেন্ট যোগ করতে সাহায্য করেঃ

kt_satt_skill_example_id=1466

উপরোক্ত উদাহরণে, myFunc নামে একটি ফাংশনকে id="btn" যুক্ত একটি এইচটিএমএল button এলিমেন্টে যোগ করা হয়েছে।

Onload এবং Onunload ইভেন্ট

ব্যবহারকারী একটি পেজে প্রবেশ করলে অথবা বের হয়ে গেলে Onload এবং Onunload ইভেন্ট কাজ করে।

ব্যবহারকারীর ব্রাউজারের টাইপ এবং ব্রাউজারের ভার্সন যাচাই করার জন্য এবং ঐ তথ্যের ভিত্তিতে ওয়েবপেজের যথাযথ ভার্সন লোড করতে Onload ইভেন্ট ব্যবহার করা হয়।

Onload এবং Onunload ইভেন্টটি কুকিজের জন্যেও ব্যবহার করা যেতে পারে।

kt_satt_skill_example_id=1467

Onchange ইভেন্ট

ইনপুট ফিল্ডে Onchange ইভেন্ট ব্যবহার করা হয়।

নিচের উদাহরণে কিভাবে onchange ইভেন্টটি ব্যবহার করা হয় তা দেখানো হলোঃ

kt_satt_skill_example_id=1468

Onmouseover এবং Onmouseout ইভেন্ট

ব্যবহারকারী একটি এইচটিএমএল এলিমেন্টের উপর মাউস নিলে বা মাউস সরিয়ে নিলে একটি ফাংশন কাজ করানোর জন্য Onmouseover এবং Onmouseout ইভেন্ট ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1469

Onfocus ইভেন্ট

kt_satt_skill_example_id=1469

addEventListener() মেথড

kt_satt_skill_example_id=1482

নির্দিষ্ট একটি এলিমেন্টের মধ্যে addEventListener() মেথড একটি ইভেন্ট হ্যান্ডেলার যোগ করেছে।

এলিমেন্টের আগের ইভেন্ট হ্যান্ডেলারটি বাদ দেওয়া ছাড়াই addEventListener() মেথডটি ইভেন্ট হ্যান্ডেলার যোগ করে।

একটি এলিমেন্টের মধ্যে আপনি একাধিক ইভেন্ট হ্যান্ডেলার যোগ করতে পারেন।

একটি এলিমেন্টের মধ্যে আপনি একই টাইপের একাধিক ইভেন্ট হ্যান্ডেলার যোগ করতে পারেন। উদাহণস্বরূপ, দুইটি "click" ইভেন্ট।

এইচটিএমএল এলিমেন্ট ছাড়াও আপনি যেকোন ডোম অবজেক্টে ইভেন্টলিসেনার যোগ করতে পারেন। উদাহণস্বরূপ উইন্ডো অবজেক্ট।

addEventListener() মেথড ইভেন্ট বাবলিং নিয়ন্ত্রন করা সহজ করে দেয়।

আপনি খুব সহজেই removeEventListener() মেথড ব্যবহার করে একটি ইভেন্টলিসেনার বাদ দিতে পারেন।

kt_satt_skill_example_id=1483

প্রথম প্যারামিটারে ইভেন্টের নাম থাকে যেমন "click" , "mousedown"।

দ্বিতীয় প্যারামিটারটি হলো একটি কলব্যাক ফাংশন যা ইভেন্ট ঘটলে রান হয়।

তৃতীয় প্যারামিটারটি ইভেন্ট বাবলিং অথবা ইভেন্ট ক্যাপচারিং ব্যবহার করার জন্য একটি বুলিয়ান ভ্যালু নির্দেশ করে। এই প্যারামিটারটি ঐচ্ছিক।

ইভেন্টের নামের আগে "on" ব্যবহার করবেন না। "onclick" এর পরিবর্তে "click" ব্যবহার করবেন।

এলিমেন্টে ইভেন্ট হ্যান্ডেলার যোগ

kt_satt_skill_example_id=1484

এছাড়া আপনি বাহিরে ডিফাইন করা একটি ফাংশনের নাম উল্লেখ করেও করতে পারেনঃ

kt_satt_skill_example_id=1485

একটি এলিমেন্টে একাধিক ইভেন্ট হ্যান্ডেলার যোগ করা

addEventListener() মেথড ব্যবহার করে আগের ইভেন্ট হ্যান্ডেলারটি বাদ দেওয়া ছাড়াই এলিমেন্টের মধ্যে একাধিক ইভেন্ট হ্যান্ডেলার যোগ করা যায়ঃ

kt_satt_skill_example_id=1487

আপনি একই এলিমেন্টে বিভিন্ন টাইপের ইভেন্ট যোগ করতে পারেনঃ

kt_satt_skill_example_id=1488

উইন্ডো অবজেক্টে ইভেন্ট হ্যান্ডেলার যোগ করা

addEventListener() মেথডটি যেকোন এইচটিএমএল ডোম অবজেক্ট যেমন এইচটিএমএল এলিমেন্ট, এইচটিএমএল ডকুমেন্ট, উইন্ডো অবজেক্ট অথবা অন্যান্য অবজেক্ট যারা ইভেন্ট সাপোর্ট করে তাদের মধ্যে ইভেন্ট যোগ করতে সাহায্য করে।

kt_satt_skill_example_id=1490

প্যারামিটার দেওয়া

প্যারামিটার ভ্যালু পাস করতে চাইলে একটি "anonymous" ফাংশন ব্যবহার করতে হবে যার মধ্যে প্যারামিটারসহ ফাংশনটি থাকবেঃ

kt_satt_skill_example_id=1491

ইভেন্ট বাবলিং অথবা ইভেন্ট ক্যাপচারিং

এইচটিএমএল ডোমে ইভেন্ট প্রপাগেশনের দুইটি পদ্ধতি রয়েছে ইভেন্ট বাবলিং এবং ইভেন্ট ক্যাপচারিং।

ইভেন্ট প্রপাগেশন হচ্ছে একটি ইভেন্ট ঘটলে এলিমেন্টের ধারাবাহিকতা চিহ্নিত করার একটি পদ্ধতি। যদি একটি <div> এলিমেন্টের ভিতরে একটি <p> এলিমেন্ট থাকে এবং ব্যবহারকারী <p> এলিমেন্টে ক্লিক করে তাহলে কোন এলিমেন্টের ক্লিক ইভেন্ট আগে কাজ করবে?

bubbling এর ক্ষেত্রে ভিতরের এলিমেন্টের ইভেন্ট আগে কাজ করে এবং পরে বাহিরের গুলো কাজ করে: <p> এলিমেন্টের ক্লিক ইভেন্টটি আগে কাজ করবে, পরে <div> এলিমেন্টের ক্লিক ইভেন্টটি কাজ করে।

capturing এর ক্ষেত্রে বাহিরের এলিমেন্টের ইভেন্ট আগে কাজ করে এবং পরে ভিতরেরগুলো কাজ করে: <div> এলিমেন্টের ক্লিক ইভেন্টটি আগে কাজ করে, পরে <p> ইলিমেন্টের ক্লিক ইভেন্টটি কাজ করে।

addEventListener() মেথডে আপনি "useCapture" প্যারামিটারটি ব্যবহার করে প্রপাগেশন টাইপ নির্ধারণ করতে পারেন:

kt_satt_skill_example_id=1492

এখানে ডিফল্ট ভ্যালু false, যেটা বাবলিং প্রপাগেশন করতে ব্যবহার করা হয়। যখন ভ্যালু true থাকে, তখন ক্যাপচারিং প্রপাগেশন সক্রিয় হয়।

kt_satt_skill_example_id=1493

removeEventListener() মেথড

addEventListener() মেথড দ্বারা যুক্ত ইভেন্ট হ্যান্ডেলারকে বাদ দিতে removeEventListener() মেথডটি ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=1494

ব্রাউজার সাপোর্ট

নোট: addEventListener() এবং removeEventListener() মেথড ইন্টারনেট এক্সপ্লোরার-৮ এবং এর পূর্বের ভার্সনে সাপোর্ট করে না এবং অপেরা 6.0 এবং এর পূর্বের ভার্সনেও সাপোর্ট করে না। এসকল ব্রাউজারে একটি ইভেন্ট যোগ করার জন্য আমরা attachEvent() মেথড ব্যবহার করতে পারি এবং বাদ দেয়ার জন্য detachEvent() মেথড ব্যবহার করতে পারিঃ

kt_satt_skill_example_id=1495

ক্রস ব্রাউজার সমাধানঃ

kt_satt_skill_example_id=1496

এইচটিএমএল ডোম ইভেন্ট অবজেক্ট রেফারেন্স

সকল এইচটিএমএল ডোম ইভেন্টের একটি তালিকা দেখার জন্য আমাদের এইচটিএমএল ডোম ইভেন্ট অবজেক্ট রেফারেন্স দেখুন।

এইচটিএমএল ডোমের সাহায্যে আপনি নোডের সম্পর্ক ব্যবহার করে নোড ট্রি নেভিগেট করতে পারেন।

ডোম নোড

W3C এর এইচটিএমএল ডোমের স্ট্যান্ডার্ড অনুযায়ী, একটি এইচটিএমএল ডকুমেন্টের সবকিছুই একটি নোডঃ

• সম্পূর্ণ ডকুমেন্ট একটি ডকুমেন্ট নোড
• প্রতিটি এইচটিএমএল এলিমেন্ট একটি এলিমেন্ট নোড
• এইচটিএমএল এলিমেন্টের ভিতরের টেক্সট হচ্ছে টেক্সট নোড
• প্রতিটি এইচটিএমএল এট্রিবিউট হলো এট্রিবিউট নোড
• সকল কমেন্ট হচ্ছে কমেন্ট নোড

এইচটিএমএল ডোমের মাধ্যমে নোড ট্রির সকল নোডকে জাভাস্ক্রিপ্ট দ্বারা এক্সেস করা যাবে।

নতুন নোড তৈরি করা যাবে এবং সমস্ত নোড পরিবর্তন বা বাদ দেওয়া যাবে।

নোডের সম্পর্ক

এই সম্পর্ককে বর্ণনা করতে প্যারেন্ট,চাইল্ড এবং সিবলিং ব্যবহার করা হয়।

• একটি নোড ট্রির মধ্যে সবচেয়ে উপরের নোডকে রুট(বা রুট নোড) বলা হয়
• প্রতিটি নোডের শুধুমাত্র একটাই প্যারেন্ট থাকে, রুট ছাড়া (যার কোন প্যারেন্ট নেই)
• একটি নোডের অনেকগুলো চিলড্রেন থাকতে পারে
• সিবলিং(ব্রাদারস-সিস্টারস) হলো সেই নোড যাদের একই প্যারেন্ট থাকে

kt_satt_skill_example_id=1498

উপরের এইচটিএমএল থেকে আমরা যা শিখলামঃ

• <html> হচ্ছে একটি রুট নোড
• <html> এর কোন প্যারেন্ট নেই
• <html> হচ্ছে <head> এবং<body> এর প্যারেন্ট
• <head>হচ্ছে <html>এর প্রথম চাইল্ড
• <body> হলো <html> এর শেষ চাইল্ড

এবং

• <head> এর একটি চাইল্ড আছেঃ <title>
• <title> এর একটি চাইল্ড টেক্সট নোড রয়েছেঃ "জাভাস্ক্রিপ্ট উদাহরণ"
• <body> এর দুইটি চাইল্ড আছেঃ <h1> এবং <p>
• <h1> এর একটি চাইল্ড আছেঃ "ডোম টিউটোরিয়াল"
• <p> এর একটি চাইল্ড আছেঃ "স্যাট একাডেমী"
• <h1> এবং <p> হচ্ছে সিবলিং

নোডের মধ্যে নেভিগেট করা

আপনি জাভাস্ক্রিপ্ট দিয়ে নোডের মধ্যে নেভিগেট করতে নিম্নলিখিত নোড প্রোপার্টি ব্যবহার করতে পারেনঃ

• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling

সতর্কতা!

ডোম(DOM) প্রক্রিয়াকরণে একটি ভুল ধারণা হলো একটি এলিমেন্ট নোডে শুধু টেক্সট থাকবে।

এই উদাহরণেঃ <title>ডোম টিউটোরিয়াল</title>, এলিমেন্ট নোড <title> টেক্সট ধারণ করে না। এটি "ডোম টিউটোরিয়াল" ভ্যালুসহ একটি টেক্সট নোড(text node) ধারণ করে।

নোডের innerHTMLপ্রোপারটি অথবা nodeValue দ্বারা টেক্সট নোডের ভ্যালু এক্সেস করা যেতে পারে।

চাইল্ড নোড এবং নোড ভ্যালু

innerHTML প্রোপারটি ছাড়াও আপনি একটি এলিমেন্টের কন্টেন্টকে পেতে childNodes এবং nodeValue প্রোপারটি ব্যবহার করতে পারেন।

নিম্নলিখিত উদাহরণে আমরা একটি <h1> এলিমেন্টের নোড ভ্যালুকে সংগ্রহ করে এবং একটি <p> এলিমেন্টে ব্যবহার করেছি।

short note

উপরোক্ত উদাহরণে getElementById হলো একটি মেথড, childNodes এবং nodeValue হচ্ছে প্রোপার্টি।

এই টিউটোরিয়ালে innerHTML প্রোপার্টি ব্যবহার করা হয়েছে। তবে ট্রি স্ট্রাকচার এবং ডোমের নেভিগেশন জানার জন্য উপরোক্ত মেথডটি অবশ্যই শেখা প্রয়োজন।

firstChild প্রোপারটির ব্যবহার এবং childNodes[0] এর ব্যবহার একই রকমঃ

short note

ডোম রুট নোড

শুধুমাত্র দুটি উপায়ে সম্পূর্ণ ডকুমেন্টকে এক্সেস করা যায়ঃ

• document.body - ডকুমেন্টের বডি
• document.documentElement - সম্পূর্ণ ডকুমেন্ট

short note

short note

nodeName প্রোপার্টি

nodeName প্রোপার্টি দ্বারা একটি নোডের নাম নির্দেশ করা হয়।

• nodeName প্রোপার্টি read-only
• একটি এলিমেন্ট নোডের nodeName এবং TagName একই রকম
• একটি এট্রিবিউট নোডের nodeName হলো এট্রিবিউটের নাম
• একটি টেক্সট নোডের nodeName সবসময় #text হয়
• ডকুমেন্ট নোডের nodeName সবসময় #document হয়

নোটঃ nodeName সবসময় একটি এইচটিএমএল এলিমেন্টের বড়হাতের অক্ষরের ট্যাগ নাম ধারণ করে।

nodeValue প্রোপার্টি

nodeValue প্রোপার্টি একটি নোডের ভ্যালু নির্দেশ করে।

• এলিমেন্ট নোডের nodeValue এর ভ্যালু undefined থাকে
• টেক্সট নোডের nodeValue ঐ টেক্সটকেই নির্দেশ করে
• এট্রিবিউট নোডের nodeValue হলো এট্রিবিউটের ভ্যালু

nodeType প্রোপার্টি

nodeType প্রোপার্টি নোডের টাইপ রিটার্ন করে। nodeType হলো read only প্রোপার্টি।

সবচেয়ে গুরুত্বপূর্ণ নোড টাইপগুলো হচ্ছেঃ

নোড(এইচটিএমএল এলিমেন্ট) যোগ করা এবং বাদ দেওয়া

নতুন এইচটিএমএল এলিমেন্ট(নোড) তৈরি

এইচটিএমএল ডোমে একটি নতুন এলিমেন্ট যোগ করার জন্যে প্রথমে অবশ্যই এলিমেন্টটি(এলিমেন্ট নোড) তৈরি করতে হবে এবং তারপর আগের এলিমেন্টের সাধে যুক্ত করতে হবে।

kt_satt_skill_example_id=1513

উদাহরণের বর্ণনা

এই কোড একটি নতুন <p> এলিমেন্ট তৈরি করেঃ

kt_satt_skill_example_id=1514

<p> এলিমেন্টে টেক্সট যোগ করার জন্য প্রথমে আপনাকে অবশ্যই একটি টেক্সট নোড তৈরি করতে হবে। এই কোড দ্বারা একটি টেক্সট নোড তৈরি করা হয়ঃ

kt_satt_skill_example_id=1515

তারপর আপনাকে অবশ্যই টেক্সট নোডকে <p> এলিমেন্টে যুক্ত করতে হবেঃ

kt_satt_skill_example_id=1516

সবশেষে আপনি আগের তৈরিকৃত একটি এলিমেন্টের সাথে নতুন এলিমেন্টটি যুক্ত করবেন।

এই কোডটি দ্বারা আগের তৈরিকৃত এলিমেন্টকে খুঁজে বের করা হয়ঃ

kt_satt_skill_example_id=1517

এই কোড আগের তৈরিকৃত এলিমেন্টে নতুন এলিমেন্ট যুক্ত করে।

kt_satt_skill_example_id=1519

নতুন এইচটিএমএল এলিমেন্ট তৈরি - insertBefore()

পূর্ববর্তী উদাহরণে appendChild() মেথডটি প্যারেন্টের শেষ চাইল্ড হিসেবে নতুন এলিমেন্ট যুক্ত করে।

আপনি যদি এটা করতে না চান তাহলে insertBefore() মেথড ব্যবহার করতে পারেনঃ

kt_satt_skill_example_id=1522

বিদ্যমান এইচটিএমএল এলিমেন্ট বাদ দেওয়া

একটি এইচটিএমএল এলিমেন্ট বাদ দেওয়ার জন্য আপনাকে অবশ্যই এলিমেন্টের প্যারেন্টকে জানতে হবেঃ

kt_satt_skill_example_id=1524

node.remove() মেথডটি ডোম ৪ এ যোগ করা হয়েছে।
কিন্তু সকল ব্রাউজারে সাপোর্ট না করার কারণে আপনারা এটি ব্যবহার করবেন না।

উদাহরণের বর্ণনা

এই এইচটিএমএল ডকুমেন্টটিতে একটি <div> এলিমেন্টে দুটি চাইল্ড নোড(দুটি <p> এলিমেন্ট) রয়েছেঃ

kt_satt_skill_example_id=1527

id= "DIV" যুক্ত এলিমেন্টটি খুঁজে বের করিঃ

kt_satt_skill_example_id=1528

id="para1" যুক্ত <p> এলিমেন্টটি খুঁজে বের করিঃ

kt_satt_skill_example_id=1529

প্যারেন্ট থেকে চাইল্ডকে বাদ দেইঃ

kt_satt_skill_example_id=1531

প্যারেন্ট এলিমেন্টকে নির্দেশ না করেই একটি এলিমেন্টকে মুছে ফেলতে খুবই।
কিন্তু দুঃখিত, এলিমেন্টটিকে বাদ দিতে হলে অবশ্যই এর প্যারেন্ট এলিমেন্টকে চিহ্নিত করে দিতে হবে।

একটি ভিন্ন পদ্ধতি দেওয়া হলোঃ

kt_satt_skill_example_id=1532

এইচটিএমএল এলিমেন্ট প্রতিস্থাপন 

এইচটিএমএল ডোমের একটি এলিমেন্টকে প্রতিস্থাপন করতে replaceChild() মেথডটি ব্যবহার করুনঃ

kt_satt_skill_example_id=1534

এইচটিএমএল ডোম নোড লিস্ট

getElementsByTagName () মেথড একটি নোড লিস্ট রিটার্ন করে। নোড লিস্ট হলো নোডের একধরনের অ্যারে।

নিম্নলিখিত উদাহরণে ডকুমেন্টের সকল <p> নোডকে সিলেক্ট করা হয়েছেঃ

kt_satt_skill_example_id=1536

নোটঃ ইনডেক্স সবসময় ০ থেকে শুরু হয়।

এইচটিএমএল ডোম নোড লিস্ট লেন্থ

length প্রোপার্টি দ্বারা নোড লিস্টের নোডের সংখ্যা নির্দেশ করেঃ

kt_satt_skill_example_id=1538

উদাহরণের বর্ণনা

1. একটি নোড লিস্টের সকল <p> এলিমেন্টকে খুঁজে বের করি
2. নোড লিস্টের দৈর্ঘ্য দেখানো হয়েছে

নোড লিস্টের নোডের মধ্যে লুপ করতে চাইলে length প্রোপার্টি খুবই উপকারী।

kt_satt_skill_example_id=1539

নোড লিস্ট অ্যারে(array) নয়!
একটি নোড লিস্ট একটি অ্যারের মত মনে হতে পারে, কিন্তু আসলে তা নয়। আপনি নোড লিস্টের মধ্যে লুপ করতে পারেন এবং এর নোডকে অ্যারের মত উল্লেখ করতে পারেন। কিন্তু আপনি অ্যারের valueOf () অথবা join() মেথড নোড লিস্টে ব্যবহার করতে পারবেন না।